<script setup>
import { ref, watch, watchEffect } from 'vue'

const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')

// 可以直接侦听一个 ref
watch(question, async (newQuestion, oldQuestion) => {
  if (newQuestion.indexOf('?') > -1) {
    answer.value = 'Thinking...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Error! Could not reach the API. ' + error
    }
  }
  console.log(question.value, 'watch');
},{
  immediate:true,
})
// watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组。
// 深度侦听 {deep:true} 立即执行 {immediate:false}
// watch vs watchEffect
// 明确追踪数据源。在副作用发生期间自动追踪依赖（访问的）。
watchEffect(()=>{
  console.log(question.value, 'watchEffect');
})
// 侦听回调触发的时机，默认情况下会在组件更新之前触发，如果想要在更新后触发，则需要指明 {flush:'post'}，或使用watchPostEffect()

// 手动停止侦听器，需要调用watch 或 watchEffect 返回的函数

// watch 与 watchEffect 的区别
// 1. 依赖追踪方式：watch 显示指定数据源，watchEffect 不能指定数据源，自动收集回调函数中响应式数据的依赖；
// 2. 执行时机：watch 默认为惰性执行（首次不触发），需要配置immediate=true强制执行，watchEffect 立即执行，用于初始化收集依赖，后续数据变化自动执行；
// 3. 新旧值：watch可以获取到新旧值，watchEffect 只能获取到当前值；
// 4. 适用场景：watch 适用于精准控制监听范围，执行异步操作和复杂的场景，watchEffect适用于自动追踪依赖并执行副作用

</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</template>
